<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resource/bootstrap-4.6.1-dist/css/bootstrap.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../resource/bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--
说明:
1. container-fluid会充满屏幕, 而container会像博客园页面那样只在中间显示内容旁边留有空白.
-->
<div class="container-fluid" style="height: 100vh; padding: 5px 10px;">
    <div class="container-fluid" style="height: 22%; padding: 5px 10px; border: 1px solid black;">
        <div class="row" style="height: 100%;">
            <!--
            说明:
            1. 给row设置高度100%后可以使用align-self-center将列居中, 然后放搜索条件
            -->
            <div class="col-sm align-self-center">
                One of three columns
            </div>
            <div class="col-1">
                One of three columns
            </div>
            <div class="col-2">
                One of three columns
            </div>
            <div class="col-3">
                One of three columns
            </div>
            <div class="col-4">
                One of three columns
            </div>
            <div class="col-5">
                One of three columns
            </div>
            <div class="col-6">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
        </div>
    </div>
    <div class="container-fluid" style="height: 78%; padding: 5px 10px; border: 1px solid black;">
        <div class="row">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
        </div>
    </div>
</div>
</body>
</html>